<template>
  <a-modal
    :title="caption"
    v-model="visible"
    width="800px"
    :maskClosable="false"
    :closable="true"
  >
    <div>
      <a-form>
        <a-form-item
          label="信息标题"
          :labelCol="{ span: 3 }"
          :wrapperCol="{ span: 21 }"
        >
          <a-input v-model="title" placeholder="请输入信息标题" />
        </a-form-item>
        <!-- <a-form-item label="发布人" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
					<a-input v-model="name" placeholder="请输入发布人" />
				</a-form-item> -->
        <a-form-item
          label="信息内容"
          :labelCol="{ span: 3 }"
          :wrapperCol="{ span: 21 }"
        >
          <div class="info">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editor"
              :defaultConfig="toolbarConfig"
              :mode="mode"
            />
            <Editor
              style="height: 400px; overflow-y: hidden"
              v-model="info"
              :defaultConfig="editorConfig"
              :mode="mode"
              @onCreated="onCreated"
            />
          </div>
        </a-form-item>
      </a-form>
    </div>
    <template #footer>
      <a-button key="back" @click="onCancel">取消</a-button>
      <a-button key="submit" type="primary" @click="onConfirm">确认</a-button>
    </template>
  </a-modal>
</template>
<script>
import { dataSource as ds } from '@/services'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { isNull } from '@/utils/util'
export default {
  name: 'modal',
  components: {
    Editor,
    Toolbar
  },
  data() {
    return {
      loading: false,
      visible: false,
      caption: '',
      type: '',
      title: '',
      info: '<p></p>',
      editor: null,
      toolbarConfig: {},
      editorConfig: {
        placeholder: '请输入政策内容...',
        MENU_CONF: {
          fileName: 'file',
          uploadImage: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upload(file)

              insertFn(resultUrl)
            }
          },
          uploadVideo: {
            customUpload: async (file, insertFn) => {
              let resultUrl = await this.upload(file)
              insertFn(resultUrl)
            }
          }
        }
      },
      mode: 'default'
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    // 富文本上传图片、视频
    upload(file) {
      return new Promise((resolve) => {
        let fd = new FormData()
        fd.append('file', file)
        ds.baseUpload(fd).then((res) => {
          resolve(res?.data?.data?.url)
        })
      })
    },
    open(e) {
      const { caption, type, id, title, info } = e
      this.caption = caption
      this.type = type
      this.id = id ?? ''
      this.title = title ?? ''
      this.info = info ?? ''
      this.visible = true
    },
    // 取消
    onCancel() {
      this.visible = false
    },
    // 新增/修改
    async onConfirm() {
      var that = this
      const { id, type, title, info } = that
      if (isNull(title)) {
        that.$message.error('请输入信息标题')
        return false
      } else if (info == '<p></p>') {
        that.$message.error('请输入信息内容')
        return false
      } else {
        const params = {
          type: 0,
          title,
          info
        }
        const res =
          type == 'add'
            ? await ds.addOrEditNews(params)
            : await ds.addOrEditNews({ ...params, id })
        if (res?.data?.code == 200) {
          that.$message.success(type == 'add' ? '新建成功！' : '编辑成功！')
          that.visible = false
          that.$emit('confirm')
        }
      }
    }
  }
}
</script>

<style lang="less">
/deep/.ant-form-item {
  margin-bottom: 16px;
}
.info {
  border: 1px solid #ccc;
}
</style>
